
<template>
  <div class="system-customer">


    <xr-header/>

    <div
      class="customer-content">
      <div class="system-view-nav">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask" />
      </div>
      <div class="system-view-content">
        <div class="option-bar">
          <el-row type="flex" justify="start"  style="margin-left: -14px;margin-top: 15px">
            <el-form :inline="true" :model="queryForm" label-width='80px' inline  size='mini'>
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="queryForm.times"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  unlink-panels
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="状态" clearable>

                <el-select v-model='queryForm.disabled' clearable>

                  <el-option  value="true" label="已发布"></el-option>
                  <el-option  value="false" label="草稿"></el-option>
                </el-select>

              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>

          </el-row>
        </div>


        <el-row >
          <el-col>
            <el-table
              class="n-table--border"
              stripe
              highlight-current-row
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
              @select="tableSelect"
              @select-all="tableSelect"
            >
              <el-table-column
                label="序号"
                fixed
                type="index"
                width="50"
                fixed
                align="center">
                <template slot-scope="scope">
                  <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="typeTitle"
                label="分类名称"
                show-overflow-tooltip
              />

              <el-table-column
                prop="defId"
                label="定义id"
                show-overflow-tooltip
              />
              <el-table-column
                prop="createTime"
                label="创建时间"
                show-overflow-tooltip
              />
              <el-table-column
                prop="disabled"
                label="状态"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.disabled" type="success">已发布&nbsp; </el-tag>
                  <el-tag v-else type="warning">&nbsp; 草稿 &nbsp; </el-tag>
                </template>

              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100"
              >
                <template slot-scope="scope">
                  <Button v-if="scope.row.disabled==false"  type="primary" size="small"   @click="details(scope.row)" >发起</Button>

                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div class="p-contianer">
          <el-pagination
            class="p-bar"
            background
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>

      </div>
    </div>





  </div>

</template>
<style rel="stylesheet/scss" lang="scss" scoped>
  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }
  .option-bar {
    padding: 15px 20px;
  }
  .system-customer {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  .customer-content {
    flex: 1;
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .system-view-nav {
    min-width: 200px;
    background: #fff;
    margin-right: 10px;
    padding-top: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;

  }
  .system-view-content {
    flex: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
  }

  // 菜单
  .menu-item {
    color: #333;
    font-size: 13px;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    position: relative;
    .icon-close {
      position: absolute;
      top: 0;
      right: 8px;
      z-index: 1;
      display: none;
    }
  }

  .menu-item:hover,
  .menu-item.is-select {
    background-color:  #F6F8FA;
  }

  .menu-item:hover::before,
  .menu-item.is-select::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background-color: #5383ed;
  }
</style>

<script>
import { tagReadMsg } from '@/api/msg'
import { getBpmnModelCategory } from '@/api/analy'
import { getDraft } from '@/api/loadwfmodule'
import XrHeader from '@/components/XrHeader'

export default {
  name: 'Task',
  components: {
    XrHeader
  },

  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      checkTableData: [],
      tableData: [],
      tableHeight: 450,
      total: 0,
      chartVisible: false,
      chartData: {},
      sellerId: 0,
      queryDate: [],
      shopName: [],
      queryForm: {
        start: "",
        end: "",
        times: [],
        page: 1,
        limit: 10,
        pageSize: 10,

        whereSql: '',
        groupId: '',
        disabled: ''
      },
      categoryData: [
      ]
    }
  },
  mount() {
    this.getData()
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },

  created() {
    this.getData()
  },
  methods: {
    remove: function() {
      var checkTableData = this.checkTableData
      var ids = []

      for (var i = 0; i < checkTableData.length; i++) {
        ids.push(checkTableData[i].id)
      }
      tagReadMsg({ ids: ids }).then((response) => {
        if (response.code == 0) {
          this.checkTableData = []
          this.getData()
        }
      })
    },
    tableSelect: function(data) {
      this.checkTableData = data
    },
    queryFormCreateTime: function(e) {
      this.queryForm.createTime = e
    },
    details: function(data) {
      this.$router.push({ name: 'draftStart', params: {
        t: new Date().getTime(),
        modelKey: data.defKey,
        draftId: data.id,
        formData: data.formDataStr

      }})
    },
    queryMethod: function() {


      this.getDraft()
    },
    refreshTask: function(data) {
      this.queryForm.times = [];
      this.queryForm.start = "";
      this.queryForm.end = "";
      this.queryForm.page=1

      if (data) {
        if (data[0]) {
          if (data[0].parentId) {
            if (data[0].parentId == '-1') {
              this.queryForm.groupId = ''
            } else {
              this.queryForm.groupId = data[0].id
            }
            this.queryForm.whereSql = ''
            this.queryForm.disabled = ''
            this.getDraft()
          }
        }
      }
    },
    getDraft: function() {

      const obj = JSON.parse(JSON.stringify(this.queryForm))
      delete (obj['times'])
      getDraft(obj).then((response) => {
        this.tableData = response.data
        this.total = parseInt(response.count)
      })
    },
    getData: function() {
      getBpmnModelCategory().then((response) => {
        this.categoryData = response.data
      })
      this.getDraft()
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },

    search() {
      this.queryForm.page = 1
      this.queryForm.typeKey = ''
      if (this.queryForm.times){

        this.queryForm.start=this.queryForm.times[0]
        this.queryForm.end=this.queryForm.times[1]
      }
      this.queryMethod()
    },
    reset() {
      this.queryForm.page = 1
      this.queryForm.typeKey = ''
      this.queryForm.title = ''
      this.queryForm.disabled = ''
      this.queryDate = []
      this.queryForm.times = [];
      this.queryForm.start = "";
      this.queryForm.end = "";
      this.getDraft()
    }

  }

}

</script>
<style lang="scss" scoped>
.task-card{
  margin-top: 10px;
}

</style>
<style lang="scss" scoped>
  .message-header {
    margin-left: 28px;
    height: 60px;
    .title-icon {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    .title {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .message-body {
    position: relative;
    height: calc(100% - 75px);
    padding-left: 15px;
  }
  .message-content {
    position: relative;
    height: 100%;
  }

  .message-body-side {
    padding: 20px 0;
    width: 200px;
    font-size: 14px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow-y: auto;
    .side-item {
      position: relative;
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      font-size: 13px;
      cursor: pointer;
      i {
        color: #999;
      }
    }
  }
  .message-body-content {
    margin-left: 210px;
    height: 100%;
    overflow: hidden;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
  }

</style>
